
body{margin: 0;
padding: 0;
background: lightblue;
overflow: hidden;
}
#aa{width: 100vw;
height: 100vh;
  min-width: 340px;
   max-width: 414px;
background-image: url(bg.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;}
#a{width: 80px;
position: absolute;
left: 30px;
animation: a1  2s ease-out; }
@keyframes a1{ 0%{ transform: translate(-60px,0);
    
}
100%{transform: translate(0px,0px);
    
}}

#b{width: 10vw;
height:7vh ;
position: absolute;
right: 5px;}
#c{width: 260px;
height: 100px;
position: absolute;
left:calc(50% - 260px/2);
top:120px;
animation: c1 3s ease-out;}
@keyframes c1{ 0%{ transform: translate(200px,0);
    
}
100%{transform: translate(0px,0px);
    
}}

#d{width: 25px;

position: absolute;
left: -30px;
bottom: 250px;
animation: d1 10s linear infinite;}
@keyframes a1{ 0%{ transform: translate(-60px,0);
    
}
100%{transform: translate(0px,0px);
    
}}

#q{width: 100%;
height: 280px;
z-index: 150;
position: absolute;
bottom: 0px;}
#e{width: 260px;
height: 380px;
position: absolute;
left: calc(50% - 260px/2);
bottom: 50px;
animation: e1 3s linear,e2 2s  linear infinite 3s;}
@keyframes e1{ 0%{ transform: translate(0,350px);
    
}
100%{transform: translate(0px,0px);
    
}}
@keyframes e2{   0%{ transform: translate(0,0);
    
}
  50%{ transform: translate(0,5px);
    
}
100%{transform: translate(0px,0px);
    
}}

#f{width: 70px;
height: 110px;
z-index: 151;
opacity: 0;
position: absolute;
left: 35px;
bottom: 100px;
animation: f1 1s linear  3s forwards;}
@keyframes f1{ 0%{ transform: translate(0,110px),scale(0.1);
opacity: 0; 
transform: scale(0.1);
    
}
100%{transform: translate(0px,0px),scale(1);
opacity: 1;
transform: scale(1);

    
}}

#g{width: 100px;
height: 100px;
z-index: 151;
position: absolute;
left:calc(50% - 100px/2);
bottom: 160px;}
#h{width: 25px;
position: absolute;
right: -40px;
bottom: 40px;
animation: h1 10s linear infinite;}
@keyframes h1{ 0%{ transform: translate(0,0);
    
}
100%{transform: translate(0px,-720px);
    
}}